<template>
<div class="ww">
    <input v-model="firstName" placeholder="姓" />
    <input v-model="lastName" placeholder="名" />
    <p>{{ Message }}</p>
    <p>{{ count }}</p>
</div>
</template>

<script setup>
import {ref, watch} from 'vue'

const firstName = ref('')
const lastName = ref('')
const Message = ref()
const count = ref(0)

//监听 firstName 和 lastName 两个值的变化
watch([firstName, lastName],(newValue) =>{
    Message.value = newValue
    count.value ++
})

</script>

<style scoped>
.ww{
    background-color: rgb(145, 178, 224);
    padding: 15px;
}
</style>